<template>
    <!--<div style="top: 0;width: 100%;z-index: 3;left:0" :style="{ position: activePosition}">-->
  <div style="top: 0;width: 100%;z-index: 5;left:0;position: absolute;">
    <x-header :left-options="{backText:'',showBack:showBack}" :style="background">
      <span v-if="!showTab" class="font18" style="font-weight: normal">{{content}}</span>
      <span slot="right" v-if="showRightSel">
        <span @click="seleCoin('right')">
           {{current.mark}}{{contentText}}
          <img src="../../assets/img/arrDown.png" alt="" style="width: 14px;">
        </span>
        <div style="position: absolute;width: 100%;background: #3C3C4C;right: 0;top: 35px;box-sizing: border-box;border-bottom-left-radius: 8px;border-top-left-radius: 8px;box-shadow: 0 2px 6px 0 #000000;z-index: 5;" v-if="showRightDwon && list.length">
          <div v-for="item in list" style="border-bottom: 1px solid #292A3A;padding-left: 10px;" @click="seleCoin('downItem',item)">
            {{item.mark}}{{contentText}}
          </div>
        </div>
      </span>
      <span slot="right" @click="seleCoin('right')" v-if="showRightImg">
        <img src="../../assets/img/page1.png" alt="">
      </span>
      <span slot="right" @click="seleCoin('right')" v-if="showRightText">
        规则
      </span>
      <div v-if="showTab">
        <span style="padding: 0 5px;">
          <span
            style="padding-bottom: 5px;"
            @click="seleTab('chong')"
            :class="{'seleStyle':type == 'chong'}">
            充币
          </span>
        </span>
        <span style="padding: 0 5px;">
          <span
            @click="seleTab('ti')"
            style="padding-bottom: 5px;"
            :class="{'seleStyle':type == 'ti'}">
            提币
          </span>
        </span>
        <span style="padding: 0">
          <span
            @click="seleTab('zhuan')"
            style="padding-bottom: 5px;"
            :class="{'seleStyle':type == 'zhuan'}">
            内部转账
          </span>
        </span>
      </div>
    </x-header>
  </div>
</template>
<script>
import { XHeader } from 'vux'
import { ButtonTab, ButtonTabItem } from 'vux'
export default{
  data(){
      return {}
  },
  props:{
    content:{},
    showBack:{
      default:true
    },
    background:{
      default: function () {
        return {background:''}
      }
    },
    showRightDwon:{
      default:false
    },
    showRightText:{
      default:false
    },
    showRightImg:{
      default:false
    },
    showTab:{
      default:false
    },
    type:{
      type:String,
      default:'chong'
    },
    showRightSel:{
      default:false
    },
    current:{},
    list:{},
    contentText:{
      default:'计价',
    }
  },
  methods:{
    seleCoin(data,type){
      this.$emit(data,type)
    },
    seleTab(type){
      this.$emit('seleTab',type)
    }
  },
  created(){},
  components: {
    XHeader,ButtonTab, ButtonTabItem
  }
}
</script>
<style>
  .overwrite-title-demo{
    width: 130px;
    margin:6px auto 0;
  }
  .vux-header .vux-header-title{
    font-size: 16px!important;
    font-weight: bold!important;
  }
  .seleStyle{
    border-bottom: 2px solid #AA87FA;
  }
</style>
